<template>
  <view class="infoEmail">
    <view class="mymain">
      <view class="mylis">
        <view class="mylis-lf">姓名</view>
        <view class="mylis-ri"> **贝奇 </view>
      </view>
      <view class="mylis">
        <view class="mylis-lf">手机号</view>
        <view class="mylis-ri"> 15344442365 </view>
      </view>
      <view class="mylis">
        <view class="mylis-lf">用户ID</view>
        <view class="mylis-ri"> 445632 </view>
      </view>
      <view class="mylis">
        <view class="mylis-lf">邮箱</view>
        <view class="mylis-ri">
          <view class="wu">暂无设置</view>
          <view class="set" @tap="capitalShow = true">设置</view>
          <!-- <view class="set" @tap="capitalShow = true">修改</view> -->
        </view>
      </view>
    </view>
    <view class="modal" v-if="capitalShow == true">
      <view class="capital">
        <view class="mains">
          <view class="mians-header">个人邮箱</view>
          <view class="mians-content">
            <u-input
              placeholder="请输入邮箱地址"
              border="bottom"
              v-model="value1"
              @focus="handleFocus"
            ></u-input>
          </view>
          <view class="mians-bottom">
            <view class="cannel btn" @tap="capitalShow = false">取消</view>
            <view v-if="!value1" class="isok btn" @tap="isok">保存</view>
            <view v-if="value1" class="isok btn col">保存</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      myInfo: [
        {
          id: 1,
          name: "姓名",
        },
        {
          id: 2,
          name: "手机号",
        },
        {
          id: 3,
          name: "用户ID",
        },
        {
          id: 4,
          name: "邮箱",
        },
      ],
      capitalShow: false,
      title: "个人邮箱",
      value1: "",
    };
  },
  methods: {
    handlleSetupTap(val, ind) {
      console.log(val, ind, "handlleSetupTap");
    },
    handleok() {
      this.capitalShow = false;
    },
    handleFocus() {
      console.log(this.$refs.sss, "focus");
    },
    isok() {
      this.capitalShow = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.infoEmail {
  width: 100vw;
  height: 100vh;
  //   overflow: scroll;
  background-color: #f5f5f5;
  padding: 12px;
  .mymain {
    width: 100%;
    min-height: 204px;
    background-color: #fff;
    box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    font-size: 14px;
    color: #3d3d3d;
    padding: 15px;
    .mylis {
      height: 52px;
      border-bottom: 1px solid #e4e4e4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:last-child {
        border-bottom: none;
      }
      .mylis-lf {
      }
      .mylis-ri {
        display: flex;
        align-items: center;
        .wu {
          color: #9d9d99;
        }
        .set {
          width: 58px;
          height: 24px;
          border-radius: 5px;
          background-color: #157afe;
          color: #fff;
          text-align: center;
          line-height: 24px;
          margin-left: 10px;
        }
      }
    }
  }
  .modal {
    .capital {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 9998;
      .mains {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 220px;
        // background: rgba(232, 240, 255, 1);
        background-color: #fff;
        border-radius: 10rpx;
        z-index: 9999;
        padding: 15px 30px;
        .mians-header {
          width: 100%;
          height: 70px;
          text-align: center;
          line-height: 50px;
          font-size: 15px;
          font-family: PingFang SC Heavy;
          color: #333333;
        }
        .mians-content {
          width: 100%;
          height: 50px;
        }
        .mians-bottom {
          width: 100%;
          height: 100px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .btn {
            width: 104px;
            height: 34px;
            font-family: PingFang SC Medium;
            color: #6d6d6d;
            font-size: 12px;
            background: #ffffff;
            box-sizing: border-box;
            border: 1px solid #3d3d3d;
            border-radius: 22px;
            text-align: center;
            line-height: 34px;
          }
          .isok {
            background-color: #cececc;
            color: #fff;
            border: none;
            &.col {
              background: linear-gradient(
                288deg,
                #157afe -2%,
                #157afe -2%,
                #66a8ff 100%,
                #66a8ff 100%
              );
            }
          }
        }
      }
    }
  }
}
</style>
